<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="./../plugins/svg.min.js"></script>
  <script src="./../plugins/svg.easing.min.js"></script>
  <script src="./../plugins/svg.shapes.js"></script>
  <script src="./../utils/utils.js"></script>
</head>
<body>
<svg width="325" height="325" viewBox="0 0 325 325">
  <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency=".05" numOctaves="2" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="15" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
  <polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100" style="filter: url(#displacementFilter)" fill="currentColor"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230" style="filter: url(#displacementFilter); fill:none; stroke:red; stroke-width:2"/>
  <circle cx="100" cy="200" r="60" stroke="yellow" stroke-width="20" stroke-opacity=".5" fill="red" style="filter: url(#displacementFilter);"/>
</svg>

<br/>
<svg width="250" viewBox="0 0 200 85"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <!-- Filter declaration -->
    <filter id="MyFilter" filterUnits="userSpaceOnUse"
            x="0" y="0"
            width="200" height="120">

      <!-- offsetBlur -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>

      <!-- litPaint -->
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                          specularExponent="20" lighting-color="#bbbbbb"  
                          result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>

      <!-- merge offsetBlur + litPaint -->
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="litPaint"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Graphic elements -->
  <g filter="url(#MyFilter)">
      <path fill="none" stroke="#D90000" stroke-width="10" 
            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
      <path fill="#D90000" 
            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
        <text x="52" y="52">SVG</text>
      </g>
  </g>
</svg>

<br/>
<!--  filters feBlend  
  ** in、in2 标识为给定的滤镜原始输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>（注意：in在上层，in2在下层）
  ** mode 混合模式： normal | multiply | screen | darken | lighten
-->
<svg width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<filter id="feBlend1">
		<feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="0.9"/>
		<feBlend in="SourceGraphic" in2="floodFill" mode="normal"/>
	</filter>
	<filter id="feBlend2">
		<feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="0.9"/>
		<feBlend in="floodFill" in2="SourceGraphic" mode="normal"/>
	</filter>
	<circle cx="50" cy="50" r="40" fill="red" filter="url(#feBlend1)" />
	<circle cx="150" cy="50" r="40" fill="red" filter="url(#feBlend2)"/>

    <circle cx="300" cy="50" r="40" fill="red"  />
    <rect x="250" y="0" width="100" height="100" fill="green" fill-opacity="0.9"/>
</svg>

<br/>
<!--  filters  feColorMatrix   -->
<svg width="150" height="360" viewBox="0 0 150 360"
	preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

	<text x="70" y="50">Reference</text>
	<g>
		<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
		<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
		<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
	</g>

	<text x="70" y="120">matrix</text>

	<filter id="colorMeMatrix">
		<feColorMatrix in="SourceGraphic"
			type="matrix"
			values="0 0 0 0 0
					1 1 1 1 0
					0 0 0 0 0
					0 0 0 1 0" />
	</filter>

	<g filter="url(#colorMeMatrix)">
		<circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
		<circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
		<circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
	</g>

	<text x="70" y="190">saturate</text>

	<filter id="colorMeSaturate">
		<feColorMatrix in="SourceGraphic"
			type="saturate"
			values="0.2" />
	</filter>

	<g filter="url(#colorMeSaturate)">
		<circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
		<circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
		<circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
	</g>

	<text x="70" y="260">hueRotate</text>

	<filter id="colorMeHueRotate">
		<feColorMatrix in="SourceGraphic"
			type="hueRotate"
			values="180" />
	</filter>

	<g filter="url(#colorMeHueRotate)">
		<circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
		<circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
		<circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
	</g>

	<text x="70" y="320">luminanceToAlpha</text>

	<filter id="colorMeLTA">
		<feColorMatrix in="SourceGraphic"
			type="luminanceToAlpha" />
	</filter>

	<g filter="url(#colorMeLTA)">
		<circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
		<circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
		<circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
	</g>
</svg>

<br/>
<!-- filters feGaussianBlur  高斯模糊 
  ** in 标识为给定的滤镜原始输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
  ** stdDeviation 模糊量
-->
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="300" >
	<filter id="SourceGraphic">
		<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
	</filter>
	<filter id="SourceAlpha">
		<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
	</filter>
	<filter id="BackgroundImage">
		<feGaussianBlur in="BackgroundImage" stdDeviation="10" />
	</filter>
	<filter id="BackgroundAlpha">
		<feGaussianBlur in="BackgroundAlpha" stdDeviation="10" />
	</filter>
	<filter id="FillPaint">
		<feGaussianBlur in="FillPaint" stdDeviation="10" />
	</filter>
	<filter id="StrokePaint">
		<feGaussianBlur in="StrokePaint" stdDeviation="10" />
	</filter>

	<circle cx="60"  cy="60" r="40" fill="green" />
	<circle cx="160" cy="60" r="40" fill="green" filter="url(#SourceGraphic)" />
	<circle cx="260" cy="60" r="40" fill="green" filter="url(#SourceAlpha)" />
	<circle cx="360" cy="60" r="40" fill="green" filter="url(#BackgroundImage)" />
	<circle cx="460" cy="60" r="40" fill="green" filter="url(#BackgroundAlpha)" />
	<circle cx="560" cy="60" r="40" fill="green" filter="url(#FillPaint)" />
	<circle cx="660" cy="60" r="40" fill="green" filter="url(#StrokePaint)" />
	
	<filter id="SourceGraphic2">
		<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
	</filter>
	<filter id="SourceGraphic5">
		<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
	</filter>
	<filter id="SourceGraphic10">
		<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
	</filter>	
	<filter id="SourceGraphic20">
		<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
	</filter>
	<filter id="SourceGraphic50">
		<feGaussianBlur in="SourceGraphic" stdDeviation="50" />
	</filter>
	<filter id="SourceGraphic100">
		<feGaussianBlur in="SourceGraphic" stdDeviation="100" />
	</filter>
	<circle cx="60"  cy="160" r="40" fill="blue" />
	<circle cx="160" cy="160" r="40" fill="blue" filter="url(#SourceGraphic2)" />
	<circle cx="260" cy="160" r="40" fill="blue" filter="url(#SourceGraphic5)" />
	<circle cx="360" cy="160" r="40" fill="blue" filter="url(#SourceGraphic10)" />
	<circle cx="460" cy="160" r="40" fill="blue" filter="url(#SourceGraphic20)" />
	<circle cx="560" cy="160" r="40" fill="blue" filter="url(#SourceGraphic50)" />
	<circle cx="660" cy="160" r="40" fill="blue" filter="url(#SourceGraphic100)" />
</svg>

<br/>
<!-- filters eOffset（位移）
  ** <filter>标签的（x，y）分别是需要位移的起始位置
  ** <feOffset> 中真正被移动的图像是（x，y）到（width-x-dx，height-y-dy）的矩形区域
  **（dx，dy）分别是相对原始图像向右和向下的位移  
 -->
 <svg xmlns="http://www.w3.org/2000/svg" width="700" height="500">
	
	<filter id="feOffset_x1" x="-50%" y="-10%" width="150%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>
	<filter id="feOffset_x2" x="-10%" y="-10%" width="150%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>
	<filter id="feOffset_x3" x="50%" y="-10%" width="150%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>
	
	<filter id="feOffset_w1" x="0%" y="0%" width="50%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>
	<filter id="feOffset_w2" x="0%" y="0%" width="75%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>
	<filter id="feOffset_w3" x="0%" y="0%" width="100%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>
	<filter id="feOffset_w4" x="0%" y="0%" width="150%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>

	<filter id="feOffset_d1" x="-10%" y="-10%" width="100%" height="150%">
		<feOffset in="SourceGraphic" dx="0" dy="0" />
    </filter>
	<filter id="feOffset_d2" x="-10%" y="-10%" width="110%" height="150%">
		<feOffset in="SourceGraphic" dx="60" dy="0" />
    </filter>
	<filter id="feOffset_d3" x="-10%" y="-10%" width="110%" height="150%">
		<feOffset in="SourceGraphic" dx="90" dy="0" />
    </filter>
	<filter id="feOffset_d4" x="-10%" y="-10%" width="135%" height="150%">
		<feOffset in="SourceGraphic" dx="90" dy="0" />
    </filter>
	
	<g style="stroke:orange;stroke-width:3;fill:green;">
		<circle cx="70" cy="70" r="60" />
		<circle cx="70" cy="70" r="60" style="fill:blue;" />
		
		<circle cx="220" cy="70" r="60" />
		<circle cx="220" cy="70" r="60" style="fill:blue;filter:url(#feOffset_x1);" />
		
		<circle cx="370" cy="70" r="60" />
		<circle cx="370" cy="70" r="60" style="fill:blue;filter:url(#feOffset_x2);" />
		
		<circle cx="520" cy="70" r="60" />
		<circle cx="520" cy="70" r="60" style="fill:blue;filter:url(#feOffset_x3);" />
		
		<circle cx="70" cy="200" r="60" />
		<circle cx="70" cy="200" r="60" style="fill:blue;filter:url(#feOffset_w1);" />
		
		<circle cx="220" cy="200" r="60" />
		<circle cx="220" cy="200" r="60" style="fill:blue;filter:url(#feOffset_w2);" />
		
		<circle cx="370" cy="200" r="60" />
		<circle cx="370" cy="200" r="60" style="fill:blue;filter:url(#feOffset_w3);" />
		
		<circle cx="520" cy="200" r="60" />
		<circle cx="520" cy="200" r="60" style="fill:blue;filter:url(#feOffset_w4);" />
		
		<circle cx="70" cy="340" r="60" />
		<circle cx="70" cy="340" r="60" style="fill:blue;filter:url(#feOffset_d1);" />
		
		<circle cx="220" cy="340" r="60" />
		<circle cx="220" cy="340" r="60" style="fill:blue;filter:url(#feOffset_d2);" />
		
		<circle cx="370" cy="340" r="60" />
		<circle cx="370" cy="340" r="60" style="fill:blue;filter:url(#feOffset_d3);" />
		
		<circle cx="520" cy="340" r="60" />
		<circle cx="520" cy="340" r="60" style="fill:blue;filter:url(#feOffset_d4);" />
	</g>
	<path d="M70,10 v400 M220,10 v400 M220,10 v400 M370,10 v400 M520,10 v400 
			 M10,70 h600 M10,200 h600 M10,340 h600
			 M280,10 v400 M430,10 v400 M550,10 v400" stroke="red" stroke-width="1" />

</svg> 
</body>
<script>

</script>
</html>